---
type: tutorial
title: サイト全体にスタイルを追加する
description: |-
  「初めてのAstroブログ」チュートリアル -
  グローバルスタイルシートを作成してサイト全体のスタイルを設定する
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

概要ページにスタイルを適用できたので、サイトの残りの部分にグローバルスタイルを追加しましょう！

<PreCheck>
  - スタイルをグローバルに適用する
</PreCheck>

## グローバルスタイルシートを追加する

Astroの`<style>`タグは**デフォルトでスコープされる**ことを確認しました。つまり、そのファイル内の要素にのみ影響します。

Astroでは、スタイルを**グローバルに**定義する方法がいくつかありますが、このチュートリアルでは`global.css`ファイルを作成して各ページにインポートします。スタイルシートと`<style>`タグの組み合わせにより、サイト全体のスタイルを制御したり、特定のスタイルをピンポイントに適用したりできます。

<Steps>
1. `src/styles/global.css`に新しいファイルを作成します（まず`styles`フォルダを作成する必要があります）。

2. 以下のコードを新しいファイル`global.css`にコピーします。

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. `about.astro`のフロントマターに以下のインポート文を追加します。

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "私について";

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. 概要ページをブラウザのプレビューで確認すると、新しいスタイルが適用されているはずです！
</Steps>

<Box icon="puzzle-piece">

## やってみよう - グローバルスタイルシートをインポートする

プロジェクトの各`.astro`ファイルに必要なコードを追加して、サイトのすべてのページにグローバルスタイルを適用しましょう。

<details>
<summary>✅ コードを表示 ✅</summary>

以下のインポート文を`src/pages/index.astro`と`src/pages/blog.astro`の2つのページファイルに追加します。

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

ページテンプレートに静的または動的にHTML要素を追加して、概要ページのコンテンツを変更または追加してみましょう。JavaScriptをフロントマタースクリプトに追加して、HTMLで使用する値を準備します。ページの出来に満足したら、次のレッスンに進む前にGitHubに変更をコミットしてください。

<Box icon="question-mark">
### パターンを分析する

概要ページは現在、インポートされた`global.css`ファイルと`<style>`タグの*両方*を使用してスタイリングされています。

- 両方のスタイリング方法からスタイルが適用されていますか？

    <p>
      <Spoiler>はい。</Spoiler>
    </p>

- 競合しているスタイルはありますか？あれば、どちらが適用されますか？

    <p>
      <Spoiler>はい、`<h1>`はグローバルで`2.5rem`のサイズを持っていますが、ローカルの`<style>`タグでは`4rem`です。ローカルの`4rem`のルールが概要ページに適用されます。</Spoiler>
    </p>

- `global.css`と`<style>`の関係を説明してください。

    <p>
      <Spoiler>競合するスタイルがページにローカルな`<style>`タグとグローバルの両方で定義されている場合、ローカルのスタイルがグローバルのスタイルを上書きします。（しかし、他の要因が関係する場合もあるので、スタイルが正しく適用されているかどうか、常にサイトを目視して確認してください！）</Spoiler>
    </p>

- `global.css`ファイルでスタイルを宣言するか、または`<style>`タグで宣言するか、どのように選択すればよいですか？

    <p>
      <Spoiler>サイト全体にスタイルを適用したい場合は、`global.css`ファイルを使用することを選択します。一方、単一の`.astro`ファイルのHTMLコンテンツのみにスタイルを適用し、サイトの他の要素に影響を与えないようにしたい場合は、`<style>`タグを選択します。</Spoiler>
    </p>

</Box>



<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] `.css`ファイルをインポートして、グローバルなCSSスタイルを追加できる。
</Checklist>
</Box>

### 参考
- [Astro構文とJSXの比較](/ja/reference/astro-syntax/#astroとjsxの違い)

- [Astroの`<style>`タグ](/ja/guides/styling/#styling-in-astro)

- [AstroにおけるCSS変数](/ja/guides/styling/#css-variables)



